<template>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h5>柱图示例</h5>
				<div class="chart" id="barChart"></div>
				<h5>仪表盘</h5>
				<div class="chart" id="dashboardChart"></div>
				<h5>饼图示例</h5>
				<div class="chart" id="pieChart"></div>
			</div>
		</div>
</template>
<script>
export default {
name: 'cart',
data () {
return {
    ydata: [{
        name: '财务管理决策实训',
        value: 18
    },
    {
        name: '商品流通业实训',
        value: 16
    },
    {
        name: '暖心陪伴（津乐园20cm定制蛋糕）',
        value: 15
    },
    {
        name: '嘉果荟萃（津乐园20cm定制蛋糕）',
        value: 14
    },
    {
        name: '优雅圆舞曲（津乐园20cm）',
        value: 10
    },
    {
        name: '巧克力之夏（津乐园20cm定制蛋糕）',
        value: 7.9
    },
    {
        name: '财税宝4G',
        value: 6.7
    },
    {
        name: '成本会计',
        value: 6
    },
    {
        name: '纳税会计与筹划',
        value: 4.5
    },
    {
        name: '金融担保业实训',
        value: 3
    }],
    color : ["#8d7fec", "#5085f2","#e75fc3","#f87be2","#f2719a","#fca4bb","#f59a8f","#fdb301","#57e7ec","#cf9ef1"],
    xdata : ['财务管理决策实训', "商品流通业实训", "暖心陪伴（津乐园20cm定制蛋糕）", "嘉果荟萃（津乐园20cm定制蛋糕）", '优雅圆舞曲（津乐园20cm）','巧克力之夏（津乐园20cm定制蛋糕）','财税宝4G','成本会计','纳税会计与筹划','金融担保业实训'],
    }
},
mounted () {
    this.barChart();
    //this.dashboardChart();
    this.pieChart();
    },
methods:{
    barChart(){
        const myChart = echarts.init(document.getElementById('barChart'));
        const option1 = {
                backgroundColor: "#05224d",
                tooltip: {},
                grid: {
                    top: '10%',
                    left: '1%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true,
                },
                legend: {
                    top: '3%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight : 10,
                    data: ['注册总量' ,'最新注册量'],
                    textStyle: {
                        color: '#f9f9f9',
                        fontSize: 10,
                        borderColor: '#fff'
                    },
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#f9f9f9'
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#d1e6eb',
                            fontSize: 8,
                            margin: 15,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', ],
                }],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 4,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f9f9f9'
                        },
                    },
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            color: '#d1e6eb',
                            fontSize: 8,

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    name: '注册总量',
                    type: 'line',
                    // smooth: true, //是否平滑曲线显示
                    // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 6,
                    lineStyle: {
                        normal: {
                            color: "#28ffb3", // 线条颜色
                        },
                        borderColor: '#f0f'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 8,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#28ffb3",

                        }
                    },
                    tooltip: {
                        show: false
                    },
                    areaStyle: { //区域填充样式
                        normal: {
                            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,154,120,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,0,0, 0)'
                                }
                            ], false),
                            shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                        }
                    },
                    data: [393, 438, 485, 631, 689, 824, 987]
                }, {
                    name: '最新注册量',
                    type: 'bar',
                    barWidth: 15,
                    tooltip: {
                        show: false
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 8,
                        }
                    },
                itemStyle: {
                    normal: {
                        color: '#17f8ff',

                        }
                    },
                            data: [200, 382, 102, 267, 186, 315, 316]
                        }]
                    };
        myChart.setOption(option1);
   
        const dashboardChart = echarts.init(document.getElementById('dashboardChart'));
        const option2 = {
            backgroundColor: '#043654',
            series: [
                {
                name: '刻度',
                type: 'gauge',
                radius: '50%',
                min:0,
                max:1000,
                splitNumber: 6, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [[1,'rgba(0,0,0,0)']]
                }
                },//仪表盘轴线
                axisLabel: {
                show: false,
                color:'#fff',
                distance:30
                },//刻度标签。
                axisTick: {
                show: true,
                splitNumber: 10,
                lineStyle: {
                    color: '#09C2FF',
                    width: 2
                },
                length: -18
                },//刻度样式
                splitLine: {
                show: true,
                length: -30,
                lineStyle: {
                    color: '#09C2FF'
                }
                },//分隔线样式
                detail: {
                show: false
                },
                pointer: {
                show: false
                }
            },
            {


                type: 'gauge',
                radius: '45%',
                center: ['50%', '50%'],

                splitNumber: 0, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                    width: 5,
                    color: [
                        [
                        1, '#09C2FF'
                        ]
                    ]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    show: false
                },
                title: {
                    show: false,
                    offsetCenter: [0, '-26%'], // x, y，单位px
                    textStyle: {
                    color: '#fff',
                    fontSize: 20
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: false,
                    offsetCenter: [0, '16%'],
                    color: '#ffffff',
                    formatter: function(params) {
                return params
                },
                textStyle: {
                fontSize: 10
                }
                },
                data: [{
                value: 100
                }]
            },
            {


                type: 'gauge',
                radius: '40%',
                center: ['50%', '50%'],

                splitNumber: 0, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                    width: 15,
                    color: [
                        [
                        0.51, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                        offset: 0,
                        color: '#40A4F5'
                        },
                        {
                            offset: 1,
                            color: '#60D3FD'
                        }
                        ]
                        )
                        ],
                        [
                        1, 'rgba(65,62,84,0)'
                        ]
                    ]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    show: false
                },
                title: {
                    show: true,
                    offsetCenter: [0, '26%'], // x, y，单位px
                    textStyle: {
                    color: '#fff',
                    fontSize: 8
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, 0],
                    color: '#ffffff',
                    formatter: function(params) {
                    return params
                    },
                    textStyle: {
                        fontSize: 10
                    }
                },
                data: [
                    { name: "万公里", value: 50.26 }
                ]
                }
            ]
        }
        dashboardChart.setOption(option2);
    },
    pieChart(){
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const option3 = {
            backgroundColor: '#031845',
            color:this.color,
            legend: {
                orient: "vartical",
                x: "left",
              //  top: "center",
                left: "60%",
                bottom: "25%",
                data: this.xdata,
                itemWidth: 8,
                itemHeight: 8,
                itemGap :0,
                textStyle: { //图例文字的样式
                color: '#fff',
                fontSize: 8
                },
                formatter :function(name){
                    return ''+name
                }
            },
            series: [{
                type: 'pie',
                clockwise: false, //饼图的扇区是否是顺时针排布
                minAngle: 2, //最小的扇区角度（0 ~ 360）
                radius: ["40%", "70%"],
                center: ["30%", "40%"],
                avoidLabelOverlap: false,
                itemStyle: { //图形样式
                    normal: {
                        borderColor: '#ffffff',
                        borderWidth: 1,
                    },
                },
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        formatter: '{text|{b}}\n{c} ({d}%)',
                        rich: {
                            text: {
                                color: "#fff",
                                fontSize: 8,
                                align: 'center',
                                verticalAlign: 'middle',
                                padding: 8
                            },
                            value: {
                                color: "#fff",
                                fontSize: 10,
                                align: 'center',
                                verticalAlign: 'middle',
                            },
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: 10,
                        }
                    }
                },
                data: this.ydata
            }]
        }
        pieChart.setOption(option3);
        }
    }
}
</script>
<style scoped>
.chart {
    height: 200px;
    margin: 0px;
    padding: 0px;
}
h5 {
    margin-top: 30px;
    font-weight: bold;
}
h5:first-child {
    margin-top: 15px;
}

</style>